<template>
  <div style="padding:20px">
    <el-input v-model="fireHydantName" placeholder="请输入监测点名称">
      <i class="el-icon-search" slot="suffix" style="position:relative;top:10px;right:10px;">
      </i>
    </el-input>
    <el-tabs type="border-card" v-model="tabName" style="margin-top:20px;" @tab-click="handleClick">
      <el-tab-pane name="all">
        <span slot="label">
          <div class="ic" style="background-color: #fff;"></div>
          <div class="txt_all">全部(3)</div>
        </span>
        <el-table :data="tableData" :header-cell-style="{background:'#eef1f6'}" style="width: 100%;margin-top:20px;">
          <el-table-column prop="monitorPointName" label="监测点名称" align="center" width="110">
          </el-table-column>
          <el-table-column prop="inPressure" label="进水水压(MPa)" align="center" width="116">
          </el-table-column>
          <el-table-column prop="outPressure" label="出水水压(MPa)" align="center" width="116">
          </el-table-column>
          <el-table-column prop="createDate" label="上传时间" align="center" width="150">
          </el-table-column>
        </el-table>
        <el-pagination style="margin-top:25px" background layout="prev, pager, next" :total="11" :small="true" @current-change="changeAll">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane name="bj">
        <span slot="label">
          <div class="ic" style="background-color: #CA0303;"></div>
          <div class="txt">报警(3)</div>
        </span>
        <el-table :data="tableData" :header-cell-style="{background:'#eef1f6'}" style="width: 100%;margin-top:25px;">
          <el-table-column prop="monitorPointName" label="监测点名称" align="center" width="110">
          </el-table-column>
          <el-table-column prop="inPressure" label="进水水压(MPa)" align="center" width="116">
          </el-table-column>
          <el-table-column prop="outPressure" label="出水水压(MPa)" align="center" width="116">
          </el-table-column>
          <el-table-column prop="createDate" label="上传时间" align="center" width="150">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane name="lx">
        <span slot="label">
          <div class="ic" style="background-color: #5F5F5F;"></div>
          <div class="txt">离线(3)</div>
        </span>
        <el-table :data="tableData" :header-cell-style="{background:'#eef1f6'}" style="width: 100%;margin-top:25px;">
          <el-table-column prop="monitorPointName" label="监测点名称" align="center" width="110">
          </el-table-column>
          <el-table-column prop="inPressure" label="进水水压(MPa)" align="center" width="116">
          </el-table-column>
          <el-table-column prop="outPressure" label="出水水压(MPa)" align="center" width="116">
          </el-table-column>
          <el-table-column prop="createDate" label="上传时间" align="center" width="150">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane name="gz">
        <span slot="label">
          <div class="ic" style="background-color: #E69620;"></div>
          <div class="txt">关注(3)</div>
        </span>
        <el-table :data="tableData" :header-cell-style="{background:'#eef1f6'}" style="width: 100%;margin-top:25px;">
          <el-table-column prop="monitorPointName" label="监测点名称" align="center" width="110">
          </el-table-column>
          <el-table-column prop="inPressure" label="进水水压(MPa)" align="center" width="116">
          </el-table-column>
          <el-table-column prop="outPressure" label="出水水压(MPa)" align="center" width="116">
          </el-table-column>
          <el-table-column prop="createDate" label="上传时间" align="center" width="150">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {
  getRealtimeReportData,
} from "@/api/schedule/gisSchedule/index"
export default {
  data () {
    return {
      fireHydantName:"",
      tabName:"all",
      tableData: [],
      tableNormalData: [],
      tableAlertData: [],
      tableFollowData: [],
    }
  },
  mounted () {
    this.handleRealData(0)
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event);
      let state
      if(tab.name == 'all') {
         state = 0
      }
      if(tab.name == 'bj') {
         state = 2
      }
      if(tab.name == 'lx') {
         state = 4
      }
      if(tab.name == 'gz') {
         state = 3
      }
      this.handleRealData(state)
    },
    handleRealData (state) {
      let obj = {
        onlineState : state
      }
      getRealtimeReportData(obj).then(response => {
        let dataList = response.data
        let inconList = dataList.filter(item => item.type == 3 && item.classify != 74)
        let accordList = []
        dataList.map(it => {
          if (inconList.includes(it) == false) {
            accordList.push(it)
          }
        })
        accordList.map(item => {
          if (!item.monitorPointName) {
            item.monitorPointName = '/'
          }
          if (item.inPressure) {
            item.inPressure = item.inPressure
          } else {
            if(item.houseInPressure) {
              item.inPressure = item.houseInPressure
            } else {
              if(item.pipePressure) {
                item.inPressure = item.pipePressure
              } else {
                item.inPressure = "/"
              }
            }
          }
          if (!item.outPressure) {
            item.outPressure = "/"
          }
          if (!item.createDate) {
            item.createDate = "/"
          }
        })
        this.tableData = accordList
      }).catch(err => {
        debugger
      })
    },
    changeAll () {

    }
  }
}
</script>
<style lang="scss" scoped>
div {
  /deep/ .el-tabs--border-card > .el-tabs__content {
    padding: 0px !important;
  }
  /deep/ .el-tabs__nav-scroll {
    height: 40px;
    background: #f6f8fb;
    .el-tabs__nav {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin: 0.5px 0 0 0px;
    }
  }
}
.ic {
  width: 9px;
  height: 9px;
  border-radius: 4px;
  position: relative;
  top: 15px;
  right: 10px;
}
.txt_all {
  position: relative;
  bottom: 8px;
}
.txt {
  position: relative;
  bottom: 8px;
  left: 5px;
}
</style>